<div>
  <p-dataList [value]="cars" [paginator]="true" [rows]="rows"
    [alwaysShowPaginator]="false" [rowsPerPageOptions]="pageSizes" [paginatorPosition]="paginatorPosition">
    <p-header>
      List of Cars
    </p-header>
    <ng-template let-car pTemplate="item">
      <div class="ui-g ui-fluid car-item">
        <div class="ui-g-12 ui-md-3" style="text-align:center">
          <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
        </div>
        <div class="ui-g-12 ui-md-9 car-details">
          <div class="ui-g">
            <div class="ui-g-2 ui-sm-6">Vin: </div>
            <div class="ui-g-10 ui-sm-6">{{car.vin}}</div>
            <div class="ui-g-2 ui-sm-6">Year: </div>
            <div class="ui-g-10 ui-sm-6">{{car.year}}</div>
            <div class="ui-g-2 ui-sm-6">Brand: </div>
            <div class="ui-g-10 ui-sm-6">{{car.brand}}</div>
            <div class="ui-g-2 ui-sm-6">Color: </div>
            <div class="ui-g-10 ui-sm-6">{{car.color}}</div>
          </div>
        </div>
      </div>
    </ng-template>
  </p-dataList>
</div>
